{% load static %}
<header class="flex items-center justify-between bg-gray-800 h-20 px-8 text-white sticky top-0 z-40">
    <div>
        <a class="flex items-center gap-2" href="/">
            <img class="h-6" src="{% static 'images/logo.svg' %}" alt="Logo"/>
            <span class="text-lg font-bold">{{ PROJECT_TITLE }}</span>
        </a>
    </div>
    <nav class="block relative">
        <ul class="navitems flex items-center justify-center h-full">
            {% if request.user.is_authenticated %}
            <li><a href="/">Home</a></li>
            <li x-data="{ dropdownOpen: false }" class="relative">
                <a @click="dropdownOpen = !dropdownOpen" @click.away="dropdownOpen = false" class="cursor-pointer select-none">
                    <img class="h-8 w-8 rounded-full object-cover" src="{{ request.user.profile.avatar }}" alt="Avatar" />
                    {{ request.user.profile.name }}
                    <img x-bind:class="dropdownOpen && 'rotate-180 duration-300'" class="w-4" src="https://img.icons8.com/small/32/ffffff/expand-arrow.png" alt="Dropdown" />
                </a>
                <div x-show="dropdownOpen" x-cloak class="absolute right-0 bg-white text-black shadow rounded-lg w-40 p-2 z-20"
                x-transition:enter="duration-300 ease-out"
                x-transition:enter-start="opacity-0 -translate-y-5 scale-90"
                x-transition:enter-end="opacity-100 translate-y-0 scale-100"
                >
                    <ul class="hoverlist [&>li>a]:justify-end">
                        <li><a href="{% url 'profile' %}">My Profile</a></li>
                        <li><a href="{% url 'profile-edit' %}">Edit Profile</a></li>
                        <li><a href="{% url 'profile-settings' %}">Settings</a></li>
                        <li><a href="{% url 'account_logout' %}">Log Out</a></li>
                    </ul>
                </div>
            </li>
            
            {% else %}
            <li><a href="{% url 'account_login' %}">Login</a></li>
            <li><a href="{% url 'account_signup' %}?next={% url 'profile-onboarding' %}">Signup</a></li>
            {% endif %}
        </ul>
    </nav>
</header>
